<template>
  <el-dialog
    :destroy-on-close="false"
    :show-close="false"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    align-center
    width="1025"
  >
    <div class="persion-order">
      <img class="close" @click="close" src="~/assets/img/close.png" alt="" />
      <el-tabs v-model="activeName">
        <el-tab-pane label="NB明细" name="first">
          <div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="订单编号" width="180" />
              <el-table-column prop="name" label="时间" width="180" />
              <el-table-column prop="address" label="时长" />
              <el-table-column prop="address" label="套餐类型" />
              <el-table-column prop="address" label="金额" />
              <el-table-column prop="address" label="备注" />
            </el-table>
            <div class="footer">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[100, 200, 300, 400]"
                :background="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="套餐记录" name="second">套餐记录</el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false);
const activeName = ref("first");
const tableData = ref([]);
const currentPage = ref(0);
const pageSize = ref(10);
const close = () => {
  dialogVisible.value = false;
};
const show = () => {
  dialogVisible.value = true;
};
defineExpose({
  close,
  show,
});
</script>

<style lang="scss" scoped>
.persion-order {
  min-height: 500px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 10;
  }
  .header {
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
